import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/app/services/xhttp.dart';
import 'package:xiaomi_shop/app/widget/logoWidget.dart';
import 'package:xiaomi_shop/models/messageModel.dart';

import '../controllers/phone_sms_login_step1_controller.dart';

class PhoneSmsLoginStep1View extends GetView<PhoneSmsLoginStep1Controller> {
  const PhoneSmsLoginStep1View({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          actions: [
            TextButton(
                onPressed: () {},
                child: const Text(
                  "帮助",
                  style: TextStyle(color: Colors.black),
                ))
          ],
        ),
        body: ListView(
          padding: EdgeInsets.all(ScreenAdapter.width(40)),
          children: [
            LogoWidget(),
            SizedBox(
              height: ScreenAdapter.height(80),
            ),
            Container(
              margin: EdgeInsets.all(ScreenAdapter.width(40)),
              padding: EdgeInsets.all(ScreenAdapter.width(40)),
              height: ScreenAdapter.height(180),
              decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.circular(10)),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 区号
                  Row(
                    children: [
                      Text(
                        "+86",
                        style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(50),
                            fontWeight: FontWeight.bold),
                      ),
                      const Icon(Icons.arrow_drop_down)
                    ],
                  ),
                  // 电话号码
                  Expanded(
                    child: TextField(
                      controller: controller.phoneEditController,
                      keyboardType: TextInputType.phone,
                      textInputAction: TextInputAction.done,
                      textAlignVertical: TextAlignVertical.center,
                      maxLength: 11,
                      style: TextStyle(
                          fontSize: ScreenAdapter.fontSize(50),
                          fontWeight: FontWeight.bold),
                      decoration: InputDecoration(
                        counterText: "",
                        hintText: "请输入手机号",
                        hintStyle: TextStyle(
                            fontSize: ScreenAdapter.fontSize(50),
                            fontWeight: FontWeight.normal),
                        border: OutlineInputBorder(borderSide: BorderSide.none),
                        // 可解决 TextField 文字不居中问题
                        contentPadding: EdgeInsets.symmetric(horizontal: 14.w),
                      ),
                    ),
                  )
                ],
              ),
            ),
            // 隐私政策
            Container(
              margin: EdgeInsets.only(top: ScreenAdapter.height(20)),
              padding: EdgeInsets.all(ScreenAdapter.width(30)),
              alignment: Alignment.center,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Obx(() => Checkbox(
                      shape: const CircleBorder(
                          side: BorderSide(color: Colors.black12)),
                      activeColor: Colors.red,
                      value: controller.agreePrivacy.value,
                      onChanged: (selected) {
                        controller.agreePrivacy.value =
                            !controller.agreePrivacy.value;
                      })),
                  Expanded(
                      child: RichText(
                    maxLines: 2,
                    text: TextSpan(
                        text: "已阅读并同意",
                        style: TextStyle(color: Colors.black54),
                        children: [
                          TextSpan(
                              text: "《小米商城用户协议》",
                              style: TextStyle(color: Colors.blue.shade900),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  print("《小米商城用户协议》");
                                }),
                          TextSpan(
                              text: "《小米商城隐私政策》",
                              style: TextStyle(color: Colors.blue.shade900),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  print("《小米商城隐私政策》");
                                })
                        ]),
                  )),
                ],
              ),
            ),
            // 获取验证码
            Container(
              margin: EdgeInsets.only(
                  top: ScreenAdapter.height(80),
                  left: ScreenAdapter.height(80),
                  right: ScreenAdapter.height(80)),
              height: ScreenAdapter.height(136),
              child: ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStatePropertyAll(Colors.red),
                      foregroundColor: MaterialStatePropertyAll(Colors.white),
                      textStyle: MaterialStatePropertyAll(TextStyle(
                          fontSize: ScreenAdapter.fontSize(40),
                          fontWeight: FontWeight.bold))),
                  onPressed: () async {
                    print("获取验证码");

                    if (controller.phoneEditController.text.length != 11) {
                      Toast.show("请输入完整手机号");
                      return;
                    }
                    if (!controller.agreePrivacy.value) {
                      Toast.show("请阅读并同意服务条款");
                      return;
                    }

                    MessageModel messageModel =
                        await controller.sendLoginCode();
                    if (messageModel.success) {
                      Toast.show(messageModel.message);
                      // 替换路由
                      Get.offAndToNamed("/phone-sms-login-step2", arguments: {
                        "tel": controller.phoneEditController.text
                      });
                    } else {
                      Toast.show(messageModel.message);
                    }
                  },
                  child: const Text("获取验证码")),
            ),
            Container(
              margin: EdgeInsets.only(
                  top: ScreenAdapter.height(80),
                  left: ScreenAdapter.height(80),
                  right: ScreenAdapter.height(80)),
              height: ScreenAdapter.height(136),
              child: ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStatePropertyAll(Colors.transparent),
                      foregroundColor: MaterialStatePropertyAll(Colors.black),
                      elevation: MaterialStatePropertyAll(0),
                      textStyle: MaterialStatePropertyAll(TextStyle(
                          fontSize: ScreenAdapter.fontSize(40),
                          fontWeight: FontWeight.bold))),
                  onPressed: () {
                    print("密码登录");
                    Get.offAndToNamed("/phone-account-login");
                  },
                  child: const Text("密码登录")),
            ),
          ],
        ));
  }
}
